<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import Pagination from '@sscd/pagination';
  const pageSize = ref(20);
  const current1 = ref(3);
  const current2 = ref(4);
  const onShowSizeChange = (curr: number, page: number) => console.log(curr, page);
  watch(
    () => pageSize,
    () => console.log('pageSize', pageSize.value)
  );
  watch(
    () => current1,
    () => console.log('current', current1.value)
  );
</script>

<template>
  <div class="demo">
    <div class="demo-title">改变</div>
    <div class="demo-content">
      <Pagination
        v-model:current="current1"
        v-model:pageSize="pageSize"
        show-size-changer
        :total="500"
        @show-size-change="onShowSizeChange"
      />
      <br />
      <Pagination
        v-model:current="current2"
        show-size-changer
        :total="500"
        disabled
        @show-size-change="onShowSizeChange"
      />
    </div>
  </div>
</template>
